<template>
  <div id="getCodeId">
    <el-card class="box-card" style="margin:15px">
      <el-form
        :rules="basicRules"
        ref="basicForm"
        :inline="true"
        :model="basicData"
        size="small"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属区县:" prop="areaId">
              <el-select
                size="mini"
                v-model="basicData.areaId"
                placeholder="选择"
                @change="clickOrgTree"
              >
                <el-option
                  v-for="(item, index) in orgTree"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属医院:" prop="hospitalId">
              <el-select
                size="mini"
                v-model="basicData.hospitalId"
                placeholder="选择"
                @change="clickOrgTreeC"
              >
                <el-option
                  v-for="(item, index) in orgTreeC"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属部门:" prop="departId">
              <el-select size="mini" v-model="basicData.departId" placeholder="选择">
                <el-option
                  v-for="(item, index) in orgTreeCs"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="buttom">
        <el-button type="primary" size="mini" style="width:120px" @click="onSubmit('add')">生成二维码</el-button>
      </div>

      <div v-if="imgSrc" class="flex" style="width:100%;flex-direction: column;margin-top:4vh;">
        <ig :imgSrc="imgSrc" id="print"></ig>
        <el-button
          type="primary"
          size="mini"
          v-print="'#print'"
          style="width:120px;margin-top:4vh"
          @click="downloadImg(imgSrc,imgName)"
        >下载并打印</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { initDicts } from "@/utils/commons";
import orgApi from "@/api/Org.js";
import DeliveryManageApi from "@/api/DeliveryManage.js";
import ig from "./ig";

export default {
  components: {
    ig
  },
  data() {
    return {
      basicData: {
        areaId: "",
        departId: "",
        hospitalId: ""
      },
      basicRules: {
        areaId: [{ required: true, message: "  ", trigger: "change" }],
        hospitalId: [{ required: true, message: "  ", trigger: "change" }],
        departId: [{ required: true, message: "  ", trigger: "change" }]
      },
      // 字典
      dicts: {
        MOM_CENSUS: {}, //母亲户籍
        BABY_SEX: {}, //婴儿性别
        ACCOUNT_TYPE: {}, //户口类型
        SAMPLE_QUALITY: {}, //样本质量
        EXPERIMENT_CODE: {}, //实验项目
        COST_TYPE: {} //费用类型
      },
      // 市县
      orgTree: [],
      // 医院
      orgTreeC: [],
      // 部门
      orgTreeCs: [],
      imgSrc: "",
      imgName: ""
    };
  },
  mounted() {
    // 获取字典
    initDicts(
      [
        "MOM_CENSUS",
        "BABY_SEX",
        "ACCOUNT_TYPE",
        "SAMPLE_QUALITY",
        "COST_TYPE",
        "EXPERIMENT_CODE"
      ],
      this.dicts
    );
    // 获取基础查询
    this.initOrgTree();
  },
  methods: {
    // 获取基础查询
    initOrgTree() {
      orgApi.allTree({}).then(response => {
        const res = response.data;
        this.orgTree = res.data[0].children;
      });
    },
    // 根据选择市县获取医院
    clickOrgTree(v) {
      this.orgTreeC = [];
      this.orgTreeCs = [];
      this.basicData.hospitalId = "";
      this.basicData.departId = "";
      this.orgTree.filter(res => {
        if (res.id == v) {
          this.orgTreeC = res.children;
        }
      });
    },
    // 根据选择市县获取医院
    clickOrgTreeC(v) {
      this.orgTreeCs = [];
      this.basicData.departId = "";
      this.orgTreeC.filter(res => {
        if (res.id == v) {
          this.orgTreeCs = res.children;
        }
      });
    },
    // 三个按钮点击事件
    onSubmit(type) {
      if (type == "add") {
        this.$refs.basicForm.validate(valid => {
          if (valid) {
            DeliveryManageApi.getCode.code(this.basicData).then(res => {
              this.imgSrc = res.data.maUrl;
              this.imgName = res.data.hospitalName
            });
          } else {
            return false;
          }
        });
      }
    },
    downloadImg(path, name) {
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = path;
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#getCodeId {
  .el-textarea {
    width: 96.6%;
  }
  .el-form-item__content,
  .el-date-editor {
    width: 60% !important;
  }
  .el-input {
    width: 80% !important;
  }

  .el-select {
    width: 100% !important;
  }
  overflow: auto;
  height: 100%;
  .el-table__header {
    th {
      border: none;
    }
    th:first-child {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    th:last-child {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }
  .mores {
    .flex;
    justify-content: flex-start;
    width: 100%;
    background: #188ff233;
    height: 30px;
    padding: 5px 8px;
    .more-title {
      font-family: SourceHanSansSC;
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
      margin-right: 1rem;
      font-size: 14px;
      font-weight: 500;
      color: #000;
    }
  }
  #more-row {
    .remark {
      width: 100%;
      .el-form-item__content {
        width: 90% !important;
      }
    }
    #shiyan {
      .projectIdList {
        width: 100%;
      }
    }
  }
  .buttom {
    margin-top: 15px;
    width: 100%;
    .flex;
  }
  .print-dialog {
    .print-form {
      max-height: 500px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      flex-flow: wrap;
      .print-item {
        width: 50%;
        .flex;
        justify-content: flex-start;
        color: #222222;
        font-size: 15px;
        margin-top: 10px;
        .title {
          font-weight: bold;
          flex: 0.4;
        }
        .value {
          flex: 0.6;
          font-weight: bold;
          overflow-wrap: anywhere;
        }
      }
    }
    .el-dialog__footer {
      .flex;
    }
    .el-dialog__header {
      background: #2669f3;
    }
  }
}
</style>
